<template>
  <!--  采集仪信息管理-->
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-input v-model="form.caseCode" clearable placeholder="请输入设备编号" style="width: 300px">
        <template slot="prepend">设备编号</template>
      </el-input>

      <el-input v-model="form.queryString" style="width: 220px" clearable placeholder="请输入SN/批次号/IMEI">

      </el-input>
      <el-select v-model="form.configId" filterable clearable placeholder="请选择配置文件版本"  @change="$forceUpdate() " @focus="$forceUpdate()">
        <el-option
          v-for="item in configVersionList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="form.equipVoltage" filterable clearable placeholder="请选择电压" style="width: 140px"  @change="$forceUpdate() " @focus="$forceUpdate()">
        <el-option
          v-for="item in EnumEquipVoltageList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-select v-model="form.equipSignal" filterable clearable placeholder="请选择信号" style="width: 140px"  @change="$forceUpdate() " @focus="$forceUpdate()">
        <el-option
          v-for="item in EnumEquipSignalList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>

      <el-select v-model="form.testStatus" style="width: 140px" @change="$forceUpdate() " @focus="$forceUpdate()" clearable placeholder="请选择状态" >
        <el-option
          v-for="item in EnumEquipTestStatusList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>

      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()" ref="search">搜索
      </el-button>
    </div>
    <div class="page_main">
      <el-popconfirm title="配置版本升级后，设备会更新配置文件，确认升级吗？" style="margin-right: 16px" @confirm="handleUpgrade">
        <el-button icon="el-icon-upload2" slot="reference" class="common_btn-small">配置文件版本升级
        </el-button>
      </el-popconfirm>
      <el-radio-group v-model="form.modelId" @change="form.page=1;queryList()" style="margin-bottom: 20px">
        <el-radio-button label="">所有型号</el-radio-button>
        <el-radio-button v-for="item in EnumEquipTypeList" :key="item.id" :label="item.id">
          {{item.name}}
        </el-radio-button>
      </el-radio-group>
      <div class="common_btnBox">
        <i class="iconfont iconzongshu icon-size"></i>
        总数：{{form.total}}
      </div>
      <!-- table -->
      <el-table
        :data="tableList"
        @selection-change="handleSelectionChange"
        border>
        <el-table-column fixed type="selection" :header-cell-class-name="cellClass" width="55"></el-table-column>
        <el-table-column
          label="序号"
          fixed
          width="70">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="caseCode" min-width="140" label="设备编号"></el-table-column>
        <el-table-column prop="sn" sortable show-overflow-tooltip min-width="130" label="SN"></el-table-column>
        <el-table-column prop="equipName" width="140" label="型号">
          <template slot-scope="scope">
            <el-tooltip content="关联了传感器，不能更改!" :disabled="scope.row.testStatus===0" placement="top" effect="dark">
              <el-select v-model="scope.row.modelId"
                         size="mini"
                         :disabled="scope.row.testStatus!==0"
                         @change="changeModelId(scope.row.id,scope.row.modelId)"
                         clearable placeholder="选择型号">
                <el-option v-for="item in EnumEquipTypeList" :key="item.id" :label="item.name" :value="item.id"  :disabled="item.disabled">
                </el-option>
              </el-select>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="batch" sortable label="批次" width="100"></el-table-column>
        <el-table-column min-width="240" label="配置版本">
          <template slot-scope="scope">
            <el-select v-model="scope.row.configId" size="mini"
                       filterable
                       @change="changeConfigVersion(scope.row.id,scope.row.configId)" placeholder="请选择配置版本">
              <el-option v-for="item in configVersionList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column width="110" label="关联传感器">
          <template slot-scope="scope">
            <el-popover trigger="click" @show="showDevice(scope.row.id)" placement="right">
              <el-table :header-cell-style="{background:'#1990FE !important',padding:'5px'}" border stripe
                        :data="tableData"
                        style="width: 100%">
                <el-table-column prop="code" label="编码" width="165">
                </el-table-column>
                <el-table-column prop="typeName" label="类型" width="100"></el-table-column>
                <el-table-column prop="modelName" label="型号">
                </el-table-column>
              </el-table>
              <div slot="reference" class="name-wrapper">
                <i class="el-icon-data-analysis s-icon"></i>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="configVersion" label="配置版本" width="100">
        </el-table-column>
        <el-table-column min-width="130" label="状态">
          <template slot-scope="scope">
            <el-tag size="mini" :style="scope.row.testStatus | equipStatusColor" style="color: white">
              {{scope.row.testStatusType}}
            </el-tag>
            <button slot="reference" @click="showEquipStatus(scope.row)"><i
              style="margin-left: 5px;font-size: 15px;color: #1990FE"
              class="el-icon-warning"></i></button>
          </template>
        </el-table-column>
        <el-table-column width="170" label="更新时间">
          <template slot-scope="scope">{{scope.row.updateTime | formatTimer}}</template>
        </el-table-column>
        <el-table-column prop="operator" width="120" label="操作人"></el-table-column>
        <el-table-column label="操作" fixed="right" min-width="220">
          <template slot-scope="scope">
            <el-tooltip content="请先选择采集仪型号！" :disabled="scope.row.modelId?true:false" placement="top" effect="dark">
              <el-button class="btn_add" type="text" @click="scope.row.modelId?handleEdit(scope.row):''">编辑</el-button>
            </el-tooltip>
            <button class="btn_prohibit" @click="showRecord(scope.row.sn)">运行日志</button>
            <button class="btn_prohibit" @click="getEquipStatusList(scope.row.id)">时间轴</button>
            <button v-if="scope.row.testStatus === 2" slot="reference" class="btn_compile"
                    @click="cancelAuth(scope.row)">完成测试
            </button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.pageSize"
           :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"
        :total="form.total">
      </el-pagination>
    </div>
    <!-- 采集仪状态详情-->
    <el-dialog
      :close-on-click-modal="false"
      :title="currentRow.sn+'-采集仪状态参数'"
      :visible.sync="isShowStatusDialog"
      width="520px">
      <div>
        <p class="equip_label"><span class="info_title">配置文件版本:</span><span
          class="info">{{currentRow.configVersion}}</span></p>
        <p class="equip_label"><span class="info_title">设备信号值:</span><span class="info">{{currentRow.csq}}</span></p>
        <p class="equip_label"><span class="info_title">固件版本:</span><span
          class="info">{{currentRow.firmwareVersion}}</span></p>
        <p class="equip_label"><span class="info_title">入口电压:</span><span
          class="info">{{currentRow.voltage/1000}}v</span></p>
        <p class="equip_label"><span class="info_title">iccid:</span><span class="info">{{currentRow.iccid}}</span></p>
        <p class="equip_label"><span class="info_title">imei:</span><span class="info">{{currentRow.imei}}</span></p>
        <p class="equip_label"><span class="info_title">cpuGuid:</span><span class="info">{{currentRow.cpuGuid}}</span>
        </p>
        <p class="equip_label"><span class="info_title">物联卡号:</span><span
          class="info">{{currentRow.iotCardNumber}}</span></p>
        <p class="equip_label"><span class="info_title">设备外壳编号:</span><span
          class="info">{{currentRow.caseCode}}</span></p>
        <p class="equip_label"><span class="info_title">基站经纬度:</span><span class="info">{{currentRow.lbsloc}}</span>
        </p>
        <p class="equip_label"><span class="info_title">4G模块电压:</span><span
          class="info">{{currentRow.vbatt/1000}}v</span></p>
        <p class="equip_label"><span class="info_title">4G固件版本:</span><span
          class="info">{{currentRow.firmwarever}}</span></p>
        <p class="equip_label"><span class="info_title">状态时间:</span><span class="info">{{currentRow.netTime | formatTimer}}</span>
        </p>

        <p class="equip_label"><span class="info_title">测试文件:</span>
          <span v-if="currentRow.testFile" class="info"><a :download="currentRow.sn+'测试文件'"
                                                           :href="constUrl + currentRow.testFile">{{currentRow.sn}}测试文件</a></span>
          <span v-else style="display: inline-block">
          <upload-file v-if="currentRow.testStatus < 2 " v-model="testFile" @update="uploadTestFile"
                       ref="uploadClear"></upload-file>
            <span v-else class="info">目前状态不能上传文件</span>
        </span>
        </p>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-defalut" type="primary" @click="isShowStatusDialog = false">确定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑采集仪 -->
    <el-drawer
      :title="'编辑-'+currentRow.sn+'-采集仪'"
      :visible.sync="isShowDialog"
      direction="ltr"
      custom-class="demo-drawer"
      ref="drawer"
      size="60%">
      <div class="demo-drawer__content">
        <el-form ref="form" label-position="right" label-suffix="：" label-width="90px" :rules="rules"
                 :model="currentRow">
          <el-card style="margin-top: 20px">
            <el-divider content-position="left"><span style="font-size: 20px;color: #1990FE">物联网卡和设备外壳信息</span>
            </el-divider>
            <el-row style="margin-top: 20px">
              <el-col :span="7">
                <el-form-item label="设备外壳" label-width="100px" prop="caseCode" v-if="currentRow.caseFlag==1">
                  <el-select v-model="currentRow.caseCode"
                             size="small"
                             filterable
                             clearable placeholder="选择设备外壳">
                    <el-option v-for="item in caseSelect" :key="item.name" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="物联网卡" label-width="100px" prop="iotCardNumber" v-if="currentRow.cardFlag==1">
                  <el-select v-model="currentRow.iotCardNumber"
                             filterable
                             size="small"
                             clearable placeholder="选择物联卡">
                    <el-option v-for="item in iotCardSelect" :key="item.name" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="绑定时间" prop="bindTime">
                  <el-date-picker
                    size="small"
                    style="width: 90%;"
                    v-model="currentRow.bindTime"
                    type="date"
                    placeholder="选择日期"
                    align="right">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="使用区域" prop="region">
                  <region-unit v-model="currentRow.region" placeholder="选择区域"></region-unit>
                </el-form-item>
              </el-col>
            </el-row>

          </el-card>
          <el-card style="margin-top: 20px">
            <el-divider content-position="left"><span style="font-size: 20px;color: #1990FE">传感器绑定信息</span></el-divider>
            <el-form-item style="margin-top: 20px" label="" prop="sensorList" class="swj_form_item" label-width="0px">
              <div class="swj_form_item-transfer">
                <!-- 可关联传感器 -->
                <section class="left">
                  <h6>可关联传感器</h6>
                  <el-table
                    @selection-change="handleSelectionChangeLeft"
                    :row-style="hideTableItem"
                    :data="newCGQ"
                    ref="tableLeft"
                    size="mini"
                    max-height="500">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column min-width="110" :filters="fitlerList" :filter-method="filterHandler"
                                     property="typeName"
                                     label="类型"></el-table-column>
                    <el-table-column width="80"
                                     :filters="fitlerBatchList"
                                     :filter-method="filterHandler"
                                     property="batch" label="批次"></el-table-column>
                    <el-table-column
                      align="right">
                      <template slot="header">
                        <el-input
                          v-model="search"
                          size="mini"
                          placeholder="输入编号"/>
                      </template>
                      <el-table-column min-width="165" show-overflow-tooltip sortable property="code"
                                       label="编号"></el-table-column>
                    </el-table-column>
                  </el-table>
                </section>
                <!-- 中间按钮 -->
                <section class="center">
                  <el-button @click="handleLeftToRight" :disabled="!multipleSelectionLeft.length" size="mini"
                             type="primary"
                             icon="el-icon-right"></el-button>
                  <el-button @click="handleRightToLeft" :disabled="!multipleSelectionRight.length" size="mini"
                             type="primary" icon="el-icon-back"></el-button>
                </section>
                <section class="left">
                  <h6>已关联传感器</h6>
                  <el-table
                    @selection-change="handleSelectionChangeRight"
                    :data="rightTableList"
                    ref="tableRight"
                    size="mini"
                    max-height="500">
                    <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>
                    <el-table-column min-width="110" property="typeName" label="类型"></el-table-column>
                    <el-table-column width="80"
                                     property="batch" label="批次"></el-table-column>
                    <el-table-column min-width="165" show-overflow-tooltip property="code" label="编号"></el-table-column>
                  </el-table>
                </section>
              </div>
            </el-form-item>
          </el-card>

        </el-form>
      </div>
      <div class="demo-drawer__footer">
        <el-button type="info" @click="isShowDialog = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateUpdateForm">确定</el-button>
      </div>
    </el-drawer>
    <!-- 测试完成 -->
    <el-dialog title="设备测试情况填写" :visible.sync="isShowCompleteDialog" :close-on-click-modal="false" width="520px">
      <!-- 具体form表单 -->
      <el-form label-position="right" ref="form" :model="currentRow" label-width="110px">
        <el-form-item label="设备状态" prop="testStatus">
          <el-radio-group v-model="currentRow.testStatus" @change="changeStatus">
            <el-radio-button label="3">设备正常</el-radio-button>
            <el-radio-button label="4">设备异常</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="情况描述" prop="explanation">
          <el-input v-model="currentRow.explanation" type="textarea"
                    :autosize="{ minRows: 4, maxRows: 6 }"
                    placeholder="描述设备情况"></el-input>
        </el-form-item>
      </el-form>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="isShowCancelDialog = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="submitComplete">确定</el-button>
      </span>
    </el-dialog>
    <x-loading v-show="isLoading"></x-loading>

    <!--查看设备时间轴-->
    <el-dialog title="查看设备时间轴" :visible.sync="timeAxisDialog" :close-on-click-modal="false" width="520px">
      <!-- 具体时间轴-->
      <div style="width: 100%;height: 500px;overflow: auto;box-sizing: border-box;padding:1vw 0">
        <el-timeline :reverse="false">
          <el-timeline-item
            v-for="(item, index) in statusList"
            :key="index"
            color='#0bbd87'
            :timestamp="item.createTime|formatTimer">
            {{item.status}}
          </el-timeline-item>
        </el-timeline>
      </div>

      <!-- 操作按钮 -->

      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-defalut" type="primary" @click="timeAxisDialog = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import constUrl from '@/services/env'
  import UploadFile from '@/components/upload-file'
  import {
    upgradeVersion,
    swjQueryList,
    queryCanUseSensor,
    swjUpdate,
    swjUpdateModel,
    iotCardSelectList,
    caseSelectList,
    relateSensor,
    cgqQueryEquipSensor,
    getEquipType,
    deviceCancel,
    configQuerySelectList,
    updateConfigVersion,
    equipStatusList
  } from '@/services/model/sensor'
  import RegionUnit from '@/components/region-unit'
  import Format from '@/utils/format'
  import XLoading from '@/components/animation/x-loading.vue'
  import Enums from '@/utils/enums'

  const Echarts = require('echarts')

  export default {
    mixins: [Enums],

    components: {RegionUnit, XLoading, UploadFile},
    data() {
      return {
        constUrl,
        downloadData: {
          icon: require('../../../assets/images/logo4.png')
        },
        isLoading: false,
        timeAxisDialog: false,
        form: {
          page: 1,
          pageSize: 10,
          modelId: '',
        },
        equipStatus: {},
        tableList: [],
        testFile: [],
        search: "",
        currentRow: {}, // 新增数据
        // 型号下拉列表
        EnumEquipTypeList: [],
        EnumEquipVoltageList: [],
        EnumEquipSignalList: [],
        EnumEquipTestStatusList: [],
        isShowDialog: false,
        isShowStatusDialog: false,
        isShowCompleteDialog: false,
        rules: {
          iotCardNumber: {required: true, message: '请选择物联网卡'},
        },
        statusList:[],//时间轴列表
        // 传感器列表
        CGQList: [],
        // 左边勾选列表
        multipleSelectionLeft: [],
        // 右边勾选列表
        multipleSelectionRight: [],
        // 右边的table列表
        rightTableListModel: [],
        myContainer: '',
        tableData: [],
        configVersionList: [],
        multipleSelection: [],
        iotCardSelect: [],
        caseSelect: [],
      }
    },
    computed: {
      newCGQ() {
        if (this.search) {
          return this.CGQList.filter(data => data.code.includes(this.search))
        }
        return this.CGQList
      },
      // 弹窗的title
      dialogTitle() {
        return this.form.id ? '编辑采集仪' : '新增采集仪'
      },
      // 传感器列表去重
      fitlerBatchList() {
        let list = this.CGQList.map(x => ({text: x.batch, value: x.batch}))
        // 空obj，记录表
        let obj = {}
        list = list.reduce((cur, next) => {
          // cur.push(next)  返回的熟数组长度
          if (!obj[next.value]) obj[next.value] = cur.push(next)
          return cur
        }, [])
        return list
      },
      // 传感器列表去重
      fitlerList() {
        let list = this.CGQList.map(x => ({text: x.typeName, value: x.typeName}))
        // 空obj，记录表
        let obj = {}
        list = list.reduce((cur, next) => {
          // cur.push(next)  返回的熟数组长度
          if (!obj[next.value]) obj[next.value] = cur.push(next)
          return cur
        }, [])
        return list
      },
      // 右边的table列表
      rightTableList: {
        get() {
          return this.rightTableListModel
        },
        set(value) {
          this.rightTableListModel = value
          this.$set(this.currentRow, 'sensorList', value.map(x => {
            return x.id
          }))
        }
      },
    },
    filters: {
      // 时间格式化
      formatTimer(timer) {
        if (timer) {
          return Format(new Date(timer))
        }
        return ''
      },
      equipStatusColor(val) {
        switch (val) {
          case 0:
            return 'background-color:#909399'
          case 1:
            return 'background-color:#0073b7'
          case 2:
            return 'background-color:#f39c12'
          case 3:
            return 'background-color:#0DC26B'
          case 4:
            return 'background-color:#e43321'
          default:
            return 'background-color:#03a9f4'
        }
      },
    },
    methods: {
      focusSelect(name){
        this.form.testStatus=null
        this.$forceUpdate()
      },
      //获取设备时间轴
      async getEquipStatusList(id) {
        let res = await equipStatusList({id:id})
        this.statusList = res.data;
        this.$nextTick(()=>{this.timeAxisDialog=true})
      },
      changeStatus() {
        this.$forceUpdate()
      },
      // 测试完成
      async submitComplete() {
        let res = await deviceCancel(this.currentRow)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '设备状态更新完成！'
          })
          this.isShowCompleteDialog = false
          this.queryList()
        }
      },
      cancelAuth(row) {
        this.currentRow = {}
        this.currentRow.id = row.id
        this.currentRow.testStatus = "3"
        this.isShowCompleteDialog = true
      },
      async uploadTestFile(info) {
        this.currentRow.testFile = info[0].url
        // 待测试和待使用的设备可以上传
        await swjUpdate(this.currentRow)
      },
      showEquipStatus(row) {
        this.testFile = []
        this.currentRow = JSON.parse(JSON.stringify(row))
        this.isShowStatusDialog = true
      },
      async handleUpgrade() {
        if (this.multipleSelection.length === 0) {
          this.$message({
            type: 'info',
            message: '先勾选需要升级配置的采集仪！'
          });
          return
        }
        let idList = []
        this.multipleSelection.map(x => {
          idList.push(x.id)
        })
        let res = await upgradeVersion({equipIdList: idList})
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '配置文件升级成功'
          })
          this.queryList()
        }
      },
      // 隐藏表头选择框
      cellClass(row) {
        if (row.columnIndex === 0) {
          return 'DisabledSelection'
        }
      },
      // 选择设备
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      //获取物联网卡选择列表
      async getIotCardSelect() {
        let res = await iotCardSelectList()
        this.iotCardSelect = res.data || []
      },
      //获取外壳选择列表
      async getCaseSelect(modelId) {
        let res = await caseSelectList({modelId: modelId})
        this.caseSelect = res.data || []
      },
      showRecord(sn) {
        this.$router.push({name: 'equip-record', params: {sn: sn}})
      },
      changeModelId(id, modelId) {
        this.$confirm('此操作将修改该设备的型号, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.updateEquipModel(id, modelId);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          });
          this.queryList()
        });
      },
      changeConfigVersion(id, configId) {
        this.$confirm('此操作将修改该设备的配置文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.updateConfigVersion(id, configId);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          });
        });
      },
      async updateConfigVersion(id, configId) {
        await updateConfigVersion({id: id, configId: configId});
        this.$notify({
          type: 'success',
          title: '提示',
          message: '配置文件更新成功'
        })
        this.queryList()
      },
      async updateEquipModel(id, modelId) {
        await swjUpdateModel({id: id, modelId: modelId});
        this.$notify({
          type: 'success',
          title: '提示',
          message: '设备型号更改成功！'
        })
        this.queryList()
      },
      async queryConfigSelectList() {
        let res = await configQuerySelectList()
        this.configVersionList = res.data;
      },
      async getEquipType() {
        let res = await getEquipType();
        this.EnumEquipTypeList = res.data ? res.data : []
        this.EnumEquipTypeList.map(x => {
          if (x.explanation.indexOf(',14,') !== -1||
            x.explanation.indexOf(',2,') !== -1) {
           x.disabled=true
          }else {
            x.disabled=false
          }
        })
      },
// 关联传感器显示
      async showDevice(val) {
        let res = await relateSensor({
          id: val
        })
        this.tableData = res.data
        return res.data
      },
      statusType(type) {
        if (type === 1) {
          return 'online_status'
        } else {
          return 'offline_status'
        }
      }
      ,
// 在移动到已关联的列表后，左边进行隐藏
      hideTableItem({row, index}) {
        let style = {}
        if (this.currentRow.sensorList.find(x => x === row.id)) {
          style.display = 'none'
        }
        return style
      }
      ,
// 处理点击左移
      handleRightToLeft() {
        // splice不会触发computed中的事件，但是值却又更改了 只好改用中间值处理
        let list = JSON.parse(JSON.stringify(this.rightTableList))
        this.multipleSelectionRight.map(x => {
          const index = list.findIndex(k => k.id === x.id)
          if (index !== -1) {
            let [item] = list.splice(index, 1)
            this.rightTableList = list
            if (!this.CGQList.find(x => x.id === item.id)) this.CGQList.push(item)
          }
        })
        this.$refs.tableRight.clearSelection()
      }
      ,
// 当点击右移动
      handleLeftToRight() {
        this.rightTableList = this.rightTableList.concat(this.multipleSelectionLeft)
        this.$refs.tableLeft.clearSelection()
      }
      ,
// 左边tablecheck改变事件
      handleSelectionChangeLeft(val) {
        this.multipleSelectionLeft = val
      }
      ,
// 右边tablecheck改变事件
      handleSelectionChangeRight(val) {
        this.multipleSelectionRight = val
      }
      ,
      filterHandler(value, row, column) {
        const property = column.property
        return row[property] === value
      }
      ,
// 更新表单提交
      validateUpdateForm() {
        this.$refs.form.validate((valid) => {
          valid && this.submitUpdate()
        })
      },
      // 表单提交
      validateAddForm() {
        this.$refs.formAdd.validate((valid) => {
          valid && this.submitAddForm()
        })
      },
      async submitUpdate() {
        await swjUpdate(this.currentRow)
        this.$notify({
          type: 'success',
          title: '提示',
          message: '采集仪修改成功！'
        })
        this.isShowDialog = false
        this.queryList()
      },
// 打开审核弹窗
      showDialog(row) {
        this.currentRow = {checkResult: 1, id: row.id}
        this.isShowDialog = true
      },
// 查询传感器列表
      async queryCGQList(modelId) {
        const {data} = await queryCanUseSensor({modelId: modelId})
        this.CGQList = data || []
        return this.CGQList
      }
      ,
// 获取当前的序号
      getIndex(index) {
        let param = (this.form.page - 1) * this.form.pageSize + index + 1
        return param
      }
      ,
// 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryList()
      }
      ,
// 当前页码改变
      handleCurrentChange(val) {
        this.form.page = val
        this.queryList()
      }
      ,
      /**
       * row  当前操作行的对象
       */
      async handleEdit(row) {
        this.getIotCardSelect()
        this.getCaseSelect(row.modelId)
        // 查询传感器列表
        let [, res] = await Promise.all([this.queryCGQList(row.modelId), cgqQueryEquipSensor({id: row.id})])
        const {data} = res
        this.currentRow = JSON.parse(JSON.stringify(row))
        this.rightTableList = data
        this.isShowDialog = true
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      }
      ,
      async queryList() {
        this.isLoading = true
        // 由于在前端进行过滤，所以name不能传到后端
        let res = await swjQueryList(this.form)
        this.tableList = res.data?.records || []
        this.form.page = Number(res.data?.current)
        this.form.total = Number(res.data?.total)
        this.isLoading = false
      }
    },
    mounted() {
      this.getEquipType()
    this.queryDictList(['EnumEquipTestStatus', 'EnumEquipVoltage','EnumEquipSignal'], ['EnumEquipTestStatusList', 'EnumEquipVoltageList','EnumEquipSignalList'])
      this.queryConfigSelectList()
    }
    ,
    activated() {
      if(this.$route.query.configId){
        this.form.configId=this.$route.query.configId
      }
      if(this.$route.query.testStatus){
        this.form.testStatus=Number(this.$route.query.testStatus)
      }
      if(this.$route.query.modelId){
        this.form.modelId=this.$route.query.modelId
      }
      if(this.$route.query.equipVoltage){
        this.form.equipVoltage=Number(this.$route.query.equipVoltage)
      }
      if(this.$route.query.equipSignal){
        this.form.equipSignal=Number(this.$route.query.equipSignal)
      }
      this.queryList()
    }
  }
</script>
<style lang="less" scoped>
  .btn_test {
    font-size: 14px;
    color: #1990FE;
  }

  .auth-unit {
    float: left;
    margin-right: 20px;
    font-size: 20px;
    margin-top: 10px;
    color: #1990FE;
    font-weight: 600;
  }

  .swj_form_item-transfer {
    display: flex;

    .left {
      flex: 1;
      border: 1px solid #E4E7ED;
      padding: 5px;
      border-radius: 8px;

      h6 {
        text-align: center;
        line-height: 30px;
        font-size: 18px;
        margin-bottom: 6px;
      }
    }

    .right {
      flex: 1;
    }

    .center {
      flex: 0 0 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .el-button:last-child {
        margin-left: 0;
        margin-top: 20px;
      }
    }

    /deep/ table {
      th {
        padding-top: 0;
        padding-bottom: 0;
      }
    }
  }

  /deep/ .auth-unit {
    color: #1990FE !important;
  }

  /deep/ .el-table__column-filter-trigger i {
    color: white;
    font-size: 16px;
  }

  /deep/ .el-table th > .cell.highlight {
    color: #ffeb3b;
  }

  .equip_label {
    color: #1990FE;
    font-size: 15px;
    font-weight: 600;
    padding: 2px 0 3px 10px;

    .info_title {
      display: inline-block;
      width: 100px;
      text-align: right
    }

    .info {
      font-size: 13px;
      color: rgba(0, 0, 0, 0.8);
      margin-left: 5px;
    }
  }

  /*二维码的样式*/
  .Qrcode {
    width: 100%;
    height: 100%;
    padding: 10px 15px;

    margin: auto;

  }

  .share {

    /*width: 200px;*/

  }
</style>
